<template>
  <div>
    <el-upload
      :action="$url + '/upload'"
      :on-success="handleUploadSuccess"
      name="file"
      :show-file-list="false"
      style="display: none"
      ref="upload"
    >
    </el-upload>
    <div class="quill-editor">
      <div id="toolbar" slot="toolbar">
        <span class="ql-formats">
          <select class="ql-font"></select>
          <select class="ql-size"></select>
        </span>
        <span class="ql-formats">
          <button class="ql-bold"></button>
          <button class="ql-italic"></button>
          <button class="ql-underline"></button>
          <button class="ql-strike"></button>
        </span>
        <span class="ql-formats">
          <select class="ql-color"></select>
          <select class="ql-background"></select>
        </span>
        <span class="ql-formats">
          <button class="ql-script" value="sub"></button>
          <button class="ql-script" value="super"></button>
        </span>
        <span class="ql-formats">
          <button class="ql-header" value="1"></button>
          <button class="ql-header" value="2"></button>
          <button class="ql-blockquote"></button>
          <button class="ql-code-block"></button>
        </span>
        <span class="ql-formats">
          <button class="ql-list" value="ordered"></button>
          <button class="ql-list" value="bullet"></button>
          <button class="ql-indent" value="-1"></button>
          <button class="ql-indent" value="+1"></button>
        </span>
        <span class="ql-formats">
          <button class="ql-direction" value="rtl"></button>
          <select class="ql-align"></select>
        </span>
        <span class="ql-formats">
          <button class="ql-image"></button>
        </span>
        <span class="ql-formats">
          <button class="ql-clean"></button>
        </span>
        <div class="editor" ref="editor"></div>
      </div>
    </div>
  </div>
</template>

<script>
import Quill from 'quill';

// 引入核心样式和主题样式
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
export default {
  props: ['content', 'isCreate'],
  data() {
    return {
      quill: null,
      options: {
        theme: 'snow',
        modules: {
          toolbar: {
            container: '#toolbar',
            handlers: {
              image: (value) => {
                if (value) {
                  this.$refs.upload.$children[0].$refs.input.click();
                }
              },
            },
          },
        },
        placeholder: '请输入内容...',
      },
      init: 0,
    };
  },
  methods: {
    //初始化编辑器
    _initEditor() {
      let editorDom = this.$el.querySelector('.editor');
      // 初始化编辑器
      this.quill = new Quill(editorDom, this.options);
      this.quill.on('text-change', () => {
        this.emitChange();
        this.selection = this.quill.getSelection();
      });
    },
    // 更新text-change
    emitChange() {
      let html = this.$refs.editor.children[0].innerHTML;
      const quill = this.quill;
      const text = this.quill.getText();

      if (html === '<p><br></p>') html = '';
      this.$emit('input', html);
      this.$emit('change', { html, text, quill });
      this.$emit('getConetntLength', this.quill.getLength());
    },
    // 上传图片成功回调
    handleUploadSuccess(res) {
      // 获取富文本组件实例
      let quill = this.quill;
      // 如果上传成功
      if (res) {
        // 获取光标所在位置
        let length = quill.getSelection().index;
        // 插入图片，res为服务器返回的图片链接地址
        let path = this.$url + res.data.path;
        quill.insertEmbed(length, 'image', path);
        // 调整光标到最后
        quill.setSelection(length + 1);
      } else {
        // 提示信息，需引入Message
        this.$message.error('图片插入失败');
      }
    },
  },
  mounted() {
    this._initEditor();
  },
  watch: {
    content(newVal) {
      if (!this.isCreate) {
        this.init++;
        this.$refs.editor.children[0].innerHTML = newVal;
        this.emitChange();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.quill-editor {
  width: 1050px;
  margin-left: auto;
  margin-right: auto;
  background-color: #fff;
}
.editor {
  height: 400px;
}
</style>
